<!--
 * @Author: 王灿
 * @Date: 2019-11-25 00:23:32
 * @LastEditTime : 2020-01-08 11:12:04
 * @Description: 活动管理
 * @FilePath: \scarlet-sparrow-admin\src\views\commodity\commodity-activity\index.vue
 -->
 <template>
  <div class="public commodity-activity">
    <!-- header -->
    <jq-title :title="title" @addTableRow="onTableRow" />
    <!-- 优惠券列表 -->
    <happy-scroll color="rgba(0,0,0,0.05)" size="5" :resize="true">
      <el-table :data="tableData" style="width: 100%" class="public-table">
        <!-- 活动排序 -->
        <el-table-column prop="sort" label="活动排序" width="140">
          <template slot-scope="scope" >
            <el-input v-model.number="scope.row.sort" />
            <el-button class="el-icon-edit" type="danger" v-if="scope.row.status === 1" @click="onClickSort(scope.row)"></el-button>
          </template>
        </el-table-column>
        <!-- 活动名称 -->
        <el-table-column prop="activityName" label="活动名称"></el-table-column>
        <!-- 商品名称 -->
        <el-table-column prop="productName" label="商品名称"></el-table-column>
        <!-- 商品价格 -->
        <el-table-column prop="productPrice" label="商品价格"></el-table-column>
        <!-- 商品活动价格 -->
        <el-table-column prop="price" label="商品活动价格"></el-table-column>
        <!-- 活动库存 -->
        <el-table-column prop="activityStock" label="活动库存"></el-table-column>
        <!-- 商品活动状态 -->
        <el-table-column prop="status" label="活动状态">
          <template slot-scope="scope">
            <span
              :class="[scope.row.status === 0 ? 'default' : scope.row.status === 1 ? 'doing' : 'over']"
              class="public-table__status"
            ></span>
            <span>{{ scope.row.status === 0 ? '待开始' : scope.row.status === 1 ? '进行中' : '已结束'}}</span>
          </template>
        </el-table-column>
        <!-- 开始时间 -->
        <el-table-column prop="startTime" label="开始时间"></el-table-column>
        <!-- 结束时间 -->
        <el-table-column prop="endTime" label="结束时间"></el-table-column> 
        <!-- 操作 -->
        <el-table-column fixed="right" align="center" width="200" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="onCheckDetails(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="onDelete(scope.row.id)" class="active">取消</el-button>
             <el-button v-if="scope.row.status === 0" @click="onUpdateStatus(scope.row)" type="text" size="small">开始活动</el-button>
            <el-button v-if="scope.row.status === 1" @click="onUpdateStatus(scope.row)" type="text" size="small">结束活动</el-button>
          </template>
        </el-table-column>
      </el-table>
    </happy-scroll>
    <!-- 分页 -->
    <jq-page :total="total" :pageNum="pageNum" @changePageNum="changePageNum" />

    <!-- 新增/详情 -->
    <el-dialog title="活动" :visible.sync="isShow" :close-on-click-modal="false" width="600px" top="5vh">
      <activity-operate
        :row="row"
        :isShow="isShow"
        @onTableRow="onTableRow"
        @onChangeRefresh="onChangeRefresh"
      />
    </el-dialog>
  </div>
</template>

<script>
import JqTitle from '@/components/jq-title/index.vue'
import JqPage from '@/components/jq-page/index.vue'
import ActivityOperate from './activity-operate/index'
import { getActivityList, getActivityCancel, getActivityUpdateStatus, getActivityUpdateSort } from '@/api/commodity.js'
export default {
  name: 'CommodityCoupon',
  components: { JqTitle, JqPage, ActivityOperate },
  data() {
    return {
      title: { label: '活动管理', flag: true, searchFlag: false },
      pageSize: 10,
      pageNum: 1,
      total: 0,
      tableData: [],
      productList: [],
      userList: [],
      row: {},
      isRefresh: false,
      isShow: false
    }
  },
  watch: {
    // 监听页码变化
    pageNum() {
      this.onGetActivityList()
    },
    // 监听条数变化
    pageSize() {
      this.onGetActivityList()
    },
    // 监听刷新父组件页面标记
    isRefresh() {
      if (this.isRefresh) {
        this.onGetActivityList()
      }
    },
    // 监听弹窗关闭清空数据
    isShow() {
      if (!this.isShow) {
        this.row = {}
      }
    }
  },
  created() {
    this.onGetActivityList()
  },
  methods: {
    // 活动排序
    onClickSort(row) {
      if (!(/^[1-9]\d*$/.test(row.sort))) {
        this.$message({
          type: 'error',
          message: '请输入正整数',
          duration: 1500
        })
        return false
      }
      getActivityUpdateSort({
        id: row.id,
        sort: row.sort
      }).then(res => {
        this.$message({
          type: 'success',
          message: res.msg,
          duration: 1500,
          onClose: () => {
            this.onGetActivityList()
          }
        })
      })
    },
    // 新增
    onTableRow(data) {
      this.isShow = data.isShow
    },
    // 编辑
    onCheckDetails(row) {
      this.isShow = true
      this.row = row
    },
    // 页码变化
    changePageNum(data) {
      this.pageNum = data.pageNum
      this.pageSize = data.pageSize
    },
    // 获取商品活动列表
    onGetActivityList() {
      getActivityList({
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(res => {
        this.tableData = res.data.list
        this.total = res.data.totalRow
      })
    },
    // 新增成功刷新页面
    onChangeRefresh() {
      this.isShow = false
      this.isRefresh = true
    },
    // 删除
    onDelete(id) {
      this.$confirm('此操作将取消该活动，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          let form = new FormData()
          form.append('id', id) 
          getActivityCancel(form).then(res => {
            this.$message({
              type: 'success',
              message: res.msg
            })
            this.onGetActivityList()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    // 开始/结束活动
    onUpdateStatus(row) {
      let title = row.status === 0 ? "开始" : '结束'
      this.$confirm('此操作将'+ title +'该活动，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          let form = new FormData()
          form.append('id', row.id)
          form.append('status', row.status === 0 ? 1 : 2)
          getActivityUpdateStatus(form).then(res => {
            this.$message({
              type: 'success',
              message: res.msg
            })
            this.onGetActivityList()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
  }
}
</script>

<style lang="scss">
.commodity-activity {
  .el-table__row {
    .cell { 
      @include row;
      .el-button {
        padding: 7px 10px;
        border-radius: 0;
      }
    }
  }
}
</style>
